import { Select } from 'antd'
import { getChannelsAPI } from 'api/channel'
import React, { useEffect, useState } from 'react'
const { Option } = Select
export default function Channel(props) {
  // 透传props 原封不动的仍给Select组件
  const [channelsList, setChannelsList] = useState([])

  const loadChannels = async () => {
    const res = await getChannelsAPI()
    setChannelsList(res.data.channels)
  }
  // 挂载后发请求
  useEffect(() => {
    loadChannels()
  }, [])
  return <Select {...props}>
    {
      channelsList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)
    }
  </Select>
}

